<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar :leftText="title" :autoBack="true">
			</u-navbar>
		</view>

		<view class="con-body" style="background-color: #fff;">
			<view style="margin-top:15rpx;">
				<view class="album__avatar" style="display: inline-block;margin:0 20rpx;">
					<u-avatar :src="goodsDetail.avatar" size="35" mode="circle">
					</u-avatar>
				</view>
				<view style="display:inline-block;width:75%;">
					<u-text text="物业直销" color="#3e3e3e" bold size="13"></u-text>
					<u-text margin="0 0 8rpx 0" color="#999999" size="12" :text="'来自 ' + goodsDetail.from"></u-text>
				</view>
			</view>
			<view style="padding:20rpx;">
				<u-swiper :list="goodsDetail.images" indicator height="500rpx"></u-swiper>
			</view>
			

			<view style="padding-bottom:30rpx;">
				<view style="padding:20rpx;">
					报价：<text style="font-size: 32rpx;font-weight: bold;color:#f00;">￥{{goodsDetail.price}}</text>
				</view>
				<view style="padding:20rpx;">
					<text style="color: #008987; font-size: 28rpx;">{{goodsDetail.theme}}</text>
					<text style="color: #333333;font-size: 30rpx;margin-left: 10rpx;"> {{goodsDetail.content}}</text>
				</view>
				<view class="u-flex u-row-between" style="padding:15rpx;">
					<text style="color:#999;">商品状态</text>
					<text>{{goodsDetail.status == 0 ? '在售' : '已售/已下架'}}</text>
				</view>
				<view class="u-flex u-row-between" style="padding:15rpx;">
					<text style="color:#999;">交易方式</text>
					<text>小区内业主送货上门</text>
				</view>
				<view class="u-flex u-row-between" style="padding:15rpx;margin-bottom:60rpx;">
					<text style="color:#999;">发布时间</text>
					<text>{{goodsDetail.time}}</text>
				</view>
				<u-button v-if="goodsDetail.status==0" :customStyle="btnStyle" @click="buy()">立即购买</u-button>
			</view>
			<u-toast ref="uToast" />
			
		</view>
	</view>
</template>

<script>
	import {
		getLatticeDetail
	} from "@/service/shareService.js";
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
					// position: 'fixed',
					// bottom: '40rpx'
				},
				title: '商品详情',
				gid: 0,
				goodsDetail: {},
				// 后端返回的商品信息
				goodsInfo: {}
			}
		},
		onLoad(options) {
			this.gid = options.gid;
			getLatticeDetail({
				id: this.gid
			}).then(this.getGoodDetail);
		},
		methods: {
			getGoodDetail(e) {
				if (e.code == 200) {
					this.goodsDetail = e.result.info;
				}
			},
			toast(msg) {
				uni.showToast({
					title: msg,
					icon: "none"
				});
			},
			buy(){
				if(this.goodsDetail.status != 0){
					uni.showToast({
						title: this.goodsDetail.status == 1 ? '该商品已售' : '该商品已下架',
						icon: "error"
					});
					return ;
				}
				this.$u.route({
					url: '/pagesShare/lattice/buy',
					params: {
						id: this.goodsDetail.id,
						name: this.goodsDetail.content,
						theme: this.goodsDetail.theme,
						price: this.goodsDetail.price,
						image: this.goodsDetail.images[0]
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	
</style>
